<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>船员管理</a-breadcrumb-item>
          <a-breadcrumb-item>船员出勤</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <div>
          <span class="mr5"><a-button type="primary" size="small" :loading="exportLoading" @click="handleExport"> <template
              #icon><ExportOutlined /> </template>导出出勤</a-button></span>
        </div>
        <a-form layout="inline"
                autocomplete="off">
          <a-range-picker v-model:value="dateArr" format="YYYY-MM" value-format="YYYY-MM" picker="month"/>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click.prevent="handleSearch" size="small">
              <SearchOutlined/>
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div data-v-093bc6bb="" class="ant-table-wrapper css-dev-only-do-not-override-16pw25h">
        <div class="ant-spin-nested-loading css-dev-only-do-not-override-16pw25h">
          <div class="ant-spin-container">
            <div class="ant-table-container">
              <div class="ant-table-body">
                <table class="mytable">
                  <thead class="ant-table-thead">
                  <tr>
                    <th>序号</th>
                    <th>船员姓名</th>
                    <th>船员身份证号</th>
                    <th>船舶名称</th>
                    <th>职位</th>
                    <th>任职说明</th>
                    <th>上下船日期</th>
                    <th>在船天数</th>
                    <th>在船状态</th>
                    <th>合计天数</th>
                    <th v-for="item in searchMonths">{{ item }}</th>
                  </tr>
                  </thead>
                  <tbody class="ant-table-tbody">
                  <tr class="ant-table-row ant-table-row-level-0 items" v-for="(item,index) in tableData">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.chuanYuanMing }}</td>
                    <td><cc-id-card :idcard="item.chuanYuanShenFenHao"></cc-id-card></td>
                    <td>{{ item.chuanBoMing }}</td>
                    <td>{{ item.zhiWei }}</td>
                    <td>{{ item.renZhiShuoMing }}</td>
                    <td>{{ item.shangXiaChuanRiQi }}</td>
                    <td>{{ item.zaiChuanTianShu }}</td>
                    <td>{{ item.zhuangTai }}</td>
                    <td>{{ item.heJiTianShu }}</td>
                    <td v-for="citem in item.searchMonths">
                      {{ item.monthDays[citem] }}
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <show-info ref="showRef" @success="handleLoadData"></show-info>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ShowInfo from "./compoments/ShowInfo.vue";
import {exportExcel} from "~/utils/exportxls";

const showRef = ref({})
const tableData = ref([])
const tableLoading = ref(false)
const exportLoading = ref(false)
const dateArr = ref([])
const searchMonths = ref([])
const queryParams = reactive({
  "kaiShiRiQi": "",
  "jieShuRiQi": "",
  "chuanYuanMing": ""
})


// 查询表格信息 useLoadChuanyuanchuqinApi
const handleLoadData = async () => {
  try {
    tableLoading.value = true
    if (dateArr.value && dateArr.value.length > 0) {
      queryParams.kaiShiRiQi = dateArr.value[0]
      queryParams.jieShuRiQi = dateArr.value[1]
    }
    const resp = await useLoadChuanyuanchuqinApi(queryParams)
    tableLoading.value = false
    tableData.value = resp.data
    searchMonths.value = resp.data[0] ? resp.data[0].searchMonths : []
  } catch (e) {
    tableLoading.value = false
  }
}

// 搜索
const handleSearch = () => {
  if (dateArr.value && dateArr.value.length == 0) {
    useMessage().warn("请选择日期范围进行操作!")
    return
  }

  var diffMonth = getMonthDifference(dateArr.value[0], dateArr.value[1])
  if (diffMonth > 12) {
    useMessage().warn("选择日期范围不能超过12个月!")
    return
  }
  handleLoadData()
}

// 搜索
const handleExport = async () => {
  if (dateArr.value && dateArr.value.length == 0) {
    useMessage().warn("请选择日期范围进行操作!")
    return
  }

  var diffMonth = getMonthDifference(dateArr.value[0], dateArr.value[1])
  if (diffMonth > 12) {
    useMessage().warn("选择日期范围不能超过12个月!")
    return
  }
  try {
    exportLoading.value = true
    if (dateArr.value && dateArr.value.length > 0) {
      queryParams.kaiShiRiQi = dateArr.value[0]
      queryParams.jieShuRiQi = dateArr.value[1]
    }
    const resp = await useExportChuanyuanchuqinApi(queryParams)
    console.log("resp",resp)
    exportExcel(resp,"船员出勤.xlsx")
    exportLoading.value = false
  } catch (e) {
    useMessage().error(e.msg)
  }
}


function getMonthDifference(date1, date2) {
  date1 = new Date(date1)
  date2 = new Date(date2)
  var yearDiff = date2.getFullYear() - date1.getFullYear();
  var monthDiff = date2.getMonth() - date1.getMonth();
  return yearDiff * 12 + monthDiff;
}

const handleOpenShow = (id) => {
  showRef.value.handleOpen(id)
}

onMounted(() => {
  var d = new Date().Format('yyyy-MM')
  dateArr.value = [d, d]
  handleLoadData()
})
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
